import React, { Component } from "react";
// 组件
import MainLayout from "@component/mainLayout/mainLayout";
import Button from "@component/button/index";
import { Toast } from "antd-mobile";

import yhTools from "@tools/yh";
import { InterfaceG } from "@config/Config";

import pay_wallet_checked from "@images/icon/icon-checked.png";
import paytool_right_icon from "@images/paytool_right_icon.png";
import "./index.scss";

/**
 * 描述：
 * 作者：zenghq
 * 日期：2021-01-08
 */
class shopWallet extends Component {
	constructor(props) {
		super(props);
		this.state = {
			payData: {},
			selectPayToolCode: undefined // 当前选择的支付方式
		};
	}
	/*******************生命周期 start************************/
	componentDidMount() {
		this.initData();
	}
	componentWillUnmount() {}
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	/**
	 * 支付列表初始化
	 */
	initData() {
		const objp = {
			url: InterfaceG.mmoney_pay_online_checkstand_prepay,
			params: {
				channel: "03"
			}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objp).then(resp => {
			Toast.hide();
			const { code, data = {}, message = "" } = resp;
			if (code === "0") {
				const { payToolBos = [] } = data;
				let setectCode;
				// 设置默认支付方式
				for (const payItem of payToolBos) {
					if (this.isXhfPay(payItem.payToolCode) && payItem.avaliable) {
						setectCode = payItem.payToolCode;
					}
					// 小辉付未开通，默认下一个支付方式
					if (!setectCode && payItem.avaliable) {
						setectCode = payItem.payToolCode;
					}
				}
				this.setState({
					payData: data,
					selectPayToolCode: setectCode
				});
			} else {
				Toast.info(message, 2);
			}
		});
	}
	/**
	 * 微信支付信息认证
	 */
	wxPayAuth() {
		const objp = {
			url: InterfaceG.mmoney_pay_online_shenghuo_prepay_wechat,
			params: {
				channel: "03",
				platform: yhTools.platform()
			}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objp).then(resp => {
			Toast.hide();
			const { code, data = {}, message = "" } = resp;
			if (code === "0") {
				console.log("yhTools.wxPayWebPage=======>");
				yhTools.wxPayWebPage(data).then(resp => {
					console.log("resp--->", resp);
					if (resp.status === "1000") {
						// Toast.info("支付成功", 3);
						yhTools.noticePaySuccess(resp);
					} else {
						Toast.info("支付失败", 3);
						// yhTools.noticePayFailed(resp, false);
					}
				});
			} else {
				Toast.info(message, 2);
			}
		});
	}
	/**是否是小辉付 */
	isXhfPay(payToolCode) {
		return payToolCode == "1001";
	}
	/**是否是小辉付 */
	isWxPay(payToolCode) {
		return payToolCode == "1005";
	}
	/**获取用户授信流程 */
	getUserAuthPage() {
		const objp = {
			url: InterfaceG.getUserAuthPage,
			params: {}
		};
		Toast.loading("加载中...", 100);
		yhTools.request(objp).then(resp => {
			Toast.hide();
			const { code, data = {}, message = "" } = resp;
			if (code === "0") {
				// 授信状态,0-未授信，1-已授信，2-授信中，4-授信拒绝
				const { applyStatus, authPage } = data;
				if (applyStatus == 0) {
					if (authPage == 612) {
						this.props.history.push({
							pathname: "/certification/612"
						});
					} else if (authPage == 613) {
						this.props.history.push({ pathname: "/certification/613" });
					}
				} else if (applyStatus == 1) {
					this.initData();
				} else if (applyStatus == 2) {
					Toast.info("授信中", 2);
				} else if (applyStatus == 4) {
					Toast.info("授信拒绝", 2);
				} else {
					Toast.info("授信状态异常", 2);
				}
			} else {
				Toast.info(message, 2);
			}
		});
	}
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	/**
	 * 支付提交
	 */
	confirmPayClick() {
		const { selectPayToolCode } = this.state;
		if (!selectPayToolCode) {
			Toast.info("请选择支付方式", 2);
		}
		// 微信支付
		if (selectPayToolCode == "1005") {
			this.wxPayAuth();
		} else if (selectPayToolCode == "1001") {
			this.props.history.push({
				pathname: "/memberCodeWallet",
				query: {
					payScene: "SPAY",
					successUrl: "/shopPaySuccess",
					failUrl: "/shopPayFail"
				}
			});
		} else {
			Toast.info("支付方式错误", 2);
		}
	}
	/**
	 * 支付方式切换
	 * @param {}} item
	 */
	paytoolClick(item) {
		// 判断当前支付方式是否可用
		if (item.avaliable) {
			this.setState({
				selectPayToolCode: item.payToolCode
			});
		} else if (this.isXhfPay(item.payToolCode)) {
			// 小辉付去开通
			this.getUserAuthPage();
		}
	}
	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const { payData = {}, selectPayToolCode } = this.state;
		const { transAmount = "--", payToolBos = [] } = payData;
		const _pageParams = {
			header: {
				title: "永辉收银台",
				goBackAction: () => {
					yhTools.noticePayCanceled("取消支付");
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="shop_wl-content-box">
					<div className="sub-title">订单需支付金额(元)</div>
					<div className="money">{transAmount}</div>
					<div className="pay-sub-title">选择支付方式</div>
					<div className="paytool-box">
						{payToolBos.map((item, index) => (
							<div
								className="paytool-item"
								key={index}
								onClick={this.paytoolClick.bind(this, item)}
							>
								<div className="paytool-item-box">
									<div className="left-box">
										<img className="logo-img" src={item.logoAddr} />
										<div className="text-box">
											<div className="paytool-name">{item.payToolName}</div>
										</div>
									</div>
									{!item.avaliable ? (
										<div className="open-box">
											<span className="open-tips open">去开通</span>
											<img className="open-img" src={paytool_right_icon} />
										</div>
									) : selectPayToolCode == item.payToolCode ? (
										<img className="checked-img" src={pay_wallet_checked} />
									) : (
										<div className="checked-img no-checked"></div>
									)}
								</div>
								{item.tips && <div className="paytool-tips">{item.tips}</div>}
							</div>
						))}
					</div>

					<Button
						onClick={this.confirmPayClick.bind(this)}
						buttonStyle={{
							height: "1rem",
							lineHeight: "1rem",
							borderRadius: "0.5rem"
						}}
					>
						立即支付
					</Button>
				</div>
			</MainLayout>
		);
	}
}

export default shopWallet;
